<!DOCTYPE html>
<html lang="en">
<head>
    <title>Popup - Animation</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Animation" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />

    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijpopup.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#unicorn").wijpopup({
                autoHide: true,
                position: {
                    of: $('#TextBox1'),
                    offset: '0 4'
                }
            });

            $(".duration").bind("change keyup", function () {
                var o = {};
                o[$(this).attr('name')] = $(this).val() * 1;
                $("#unicorn").wijpopup(o);
            });

            $(".effect").bind("change keyup", function () {
                var o = {};
                o[$(this).attr('name')] = $(this).val();
                $("#unicorn").wijpopup(o);
            });

        });

        function popupbeside() {
            $("#unicorn").wijpopup('show');
        }
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Animation</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div id="unicorn">
                <img src="http://cdn.wijmo.com/images/unicorn.jpg" alt="Popup Unicorn!" />
            </div>
            <div>
                <input name="TextBox1" type="text" id="TextBox1" />
                <input type="button" id="Button4" onclick="popupbeside();" value="popup" />
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <div class="options">
                    <div class="option-row">
                        <label>
                            Show Duration</label>
                        <select name="showDuration" id="showDuration" class="duration">
                            <option value="200">200</option>
                            <option value="400">400</option>
                            <option value="800">800</option>
                            <option value="1200">1200</option>
                            <option value="1500">1500</option>
                        </select>
                    </div>
                    <div class="option-row">
                        <label>
                            Show Effect</label>
                        <select name="showEffect" id="showEffect" class="effect">
                            <option value="show">None</option>
                            <option value="blind">Blind</option>
                            <option value="clip">Clip</option>
                            <option value="drop">Drop</option>
                            <option value="fade">Fade</option>
                            <option value="fold">Fold</option>
                            <option value="puff">Puff</option>
                            <option value="pulsate">Pulsate</option>
                            <option value="slide">Slide</option>
                        </select>
                    </div>
                    <div class="option-row">
                        <label>
                            Hide Duration</label>
                        <select name="hideDuration" id="hideDuration" class="duration">
                            <option value="200">200</option>
                            <option value="400">400</option>
                            <option value="800">800</option>
                            <option value="1200">1200</option>
                            <option value="1500">1500</option>
                        </select>
                    </div>
                    <div class="option-row">
                        <label>
                            Hide Effect</label>
                        <select name="hideEffect" id="hideEffect" class="effect">
                            <option value="hide">None</option>
                            <option value="blind">Blind</option>
                            <option value="clip">Clip</option>
                            <option value="drop">Drop</option>
                            <option value="fade">Fade</option>
                            <option value="fold">Fold</option>
                            <option value="puff">Puff</option>
                            <option value="pulsate">Pulsate</option>
                            <option value="slide">Slide</option>
                        </select>
                    </div>
                </div>
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
                wijpopup supports animation effects for the show and hide actions using the hideEffect,
                hideOptions, showEffect, and showOptions options. The showDuration and hideDuration
                options are also used to control how long the show or hide animation will last.
            </p>
        </div>
    </div>
</body>
</html>
